<template>
	<view class="box">
		<view class="image">
			<image src="/static/logo.png" mode=""></image>
		</view>
		<view class="btns">
			<view class="btns-cancle" @click="goBack">取消 </view>
			<view @click="open()" class="btns-submit">登录</view>
		</view>
		<view class="footer" @click="change(!checked)">
			<label class="radio">
				<radio :checked="checked" />
			</label>
			请仔细阅读<text @click.stop="toPage(1)">《用户协议》</text>，<text @click.stop="toPage(1)">《隐私政策》</text>并勾选。
		</view>
		<btnlogin :zheshow='zheshow' ref="btnlogin" @submit="submit" />
	</view>
</template>

<script>
	import {
		miniLogin
	} from '@/common/http/api.js'
	import btnlogin from '@/components/login/butlogin.vue';
	export default {
		components: {
			btnlogin
		},
		data() {
			return {
				form: {
					code: ''
				},
				zheshow: false,
				info: '',
				userId: '',
				checked: false
			}
		},
		onLoad() {
			console.log('onLoad', this.$store.state)
			// if (e.userId) {
			// 	this.userId = e.userId
			// }
			if(this.$store.state.shareId) {
				this.userId = this.$store.state.shareId
			}
		},
		methods: {
			goBack() {
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			change(e) {
				console.log('e=>', e)
				this.checked = e
			},
			toPage(type) {
				const url = '/pages/aboutUs/aboutUs'
				uni.navigateTo({
					url
				})
			},
			open() {
				if (this.checked === false) {
					uni.showToast({
						title: '请仔细阅读并勾选隐私协议！',
						icon: 'none'
					})
					return
				}
				this.$refs.btnlogin.show()
			},
			submit(e) {
				
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						console.log(loginRes);
						this.form.code = loginRes.code
						let data = {
							code: this.form.code,
							userInfo:e
						}
						if (this.userId) {
							data['pid'] = this.userId
						}
						console.log('onLoa=>', data)
						uni.showLoading()
						miniLogin(data).then(res => {
							uni.setStorageSync("token", res.data.token)
							uni.setStorageSync("userInfo", res.data.userInfo)
							uni.reLaunch({
								url: '/pages/index/index'
							})
						})
					}
				});

			}
		}
	}
</script>

<style lang="scss">
	.box {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.image {
			width: 100%;
			text-align: center;
			margin-bottom: 350rpx;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}
		}

		.btns {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;

			.btns-cancle {
				width: 300rpx;
				height: 88rpx;
				border-radius: 44rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #222524;
				border: 1rpx solid #222524;
			}

			.btns-submit {
				width: 300rpx;
				height: 88rpx;
				background: #222524;
				border-radius: 44rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-left: 20rpx;
			}
		}
	}

	.footer {
		width: 690rpx;

		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		font-size: 26rpx;
		margin-bottom: 24rpx;
		white-space: normal;

		.radio {
			transform: scale(0.7)
		}

		text {
			color: darkslateblue;
		}
	}
</style>